
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit" />
	<meta name="robots" content="index, follow" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/font-awesome.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/bootstrap.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/owl.carousel.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/magnific-popup.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/animate.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/settings.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/style-red.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="qtimages/css/tk.css" media="screen" />
	<script type="text/javascript" src="qtimages/js/jquery.min.js"></script>
	<script type="text/javascript" src="qtimages/js/jquery.migrate.js"></script>
	<script type="text/javascript" src="qtimages/js/bootstrap.js"></script>
	<script type="text/javascript" src="qtimages/js/owl.carousel.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#navigation #nav_0 .menu1").addClass("active");
		});
	</script>
	<link rel="stylesheet" href="./qtimages/sl_common_form.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/nav.css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/element/index.css">
	<link rel="stylesheet" href="css/hsg.css">
	<title>用户注册</title>
</head>
<body>
<div id="wrapper">
	<div id="container">
		<script src="qttop.js"></script>
		<script src="bht.js"></script>
		<div id="content">

			<div class="section-content team-section2 no-padd" id="index-news">
				<div class="title-section title2">
					<div class="container triggerAnimation animated" data-animate="bounceIn">
						<h1>用户注册</h1>
					</div>
				</div>
				<div class="team-box">
					<div class="container">
						<div class="row">
							<div class="content-form">

								<div style="padding: 0 20px">


									<!-- 表格主体-->
									<div style="margin-top: 10px">
										<div style="border: 1px solid #ff6b31;">
											<div style="padding: 5px; border-bottom: 1px solid #ff6b31; color: white; background-color: #ff6b31;">用户注册</div>
											<div style="border: 1px solid #ccc; padding: 10px">
												<div class="row">
													<div class="col-md-12">
														<form class="form-horizontal">
															<input type="hidden" v-model="entity.id">
															<table class="table table-striped table-bordered table-hover">
																<tr><td>用户名</td><td><input type="text" class="form-control" v-model="entity.yonghuming" style="width: 160px" placeholder="请输入用户名" id="yonghuming"></td></tr>
																<tr>
																	<td>密码</td>
																	<td><input type="text" class="form-control" v-model="entity.mima" style="width: 160px" placeholder="请输入密码" id="mima"></td>
																</tr>
																<tr>
																	<td>姓名</td>
																	<td><input type="text" class="form-control" v-model="entity.xingming" style="width: 160px" placeholder="请输入姓名" id="xingming"></td>
																</tr>
																<tr>
																	<td>性别</td>
																	<td><select class="form-control" v-model="entity.xingbie" style="width: 160px;"><option value="男">男</option><option value="女">女</option></select></td>
																</tr>
																<tr>
																	<td>手机</td>
																	<td><input type="text" class="form-control" v-model="entity.shouji" style="width: 160px" placeholder="请输入手机" id="shouji"></td>
																</tr>
																<tr>
																	<td>身份证</td>
																	<td><input name="text" type="text" class="form-control" id="text" style="width: 420px;" v-model="entity.shenfenzheng" placeholder="请输入身份证"></td>
																</tr>
																<tr>
																	<td>照片</td>
																	<td><el-upload  class="avatar-uploader" action="/files/upload"  :show-file-list="false"  :on-success="zhaopiansccs"   :before-upload="zhaopianbaul"> <img v-if="zhaopianimrl" :src="zhaopianimrl" class="avatar"><img v-else-if="zhaopianavt" :src="'/files/download/'+zhaopianavt" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload> </td>
																</tr>
																<tr>
																	<td>邮箱</td>
																	<td><input type="text" class="form-control" v-model="entity.youxiang" style="width: 160px" placeholder="请输入邮箱" id="youxiang"></td>
																</tr>
																<tr>
																	<td>备注</td>
																	<td><textarea type="text" class="form-control" v-model="entity.beizhu" style="height: 100px; width: 500px;" placeholder="请输入备注" id="beizhu"></textarea></td>
																</tr>
															</table>
														</form>
														<div style="text-align: center">
															<button type="button" class="btn btn-primary" v-on:click="update()">保存</button>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- 表格主体结束-->
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<script src="sidebufen.js"></script>
		</div>
		<script src="qtdown.js"></script></div>
	<script type="text/javascript" src="qtimages/js/jquery.magnific-popup.min.js"></script>
	<script type="text/javascript" src="qtimages/js/jquery.appear.js"></script>
	<script type="text/javascript" src="qtimages/js/jquery.imagesloaded.min.js"></script>
	<script type="text/javascript" src="qtimages/js/jquery.isotope.min.js"></script>
	<script type="text/javascript" src="qtimages/js/retina-1.1.0.min.js"></script>
	<script type="text/javascript" src="qtimages/js/plugins-scroll.js"></script>
	<script type="text/javascript" src="qtimages/js/waypoint.min.js"></script>
	<script type="text/javascript" src="qtimages/js/jquery.themepunch.tools.min.js"></script>
	<script type="text/javascript" src="qtimages/js/jquery.themepunch.revolution.min.js"></script>
	<script type="text/javascript" src="qtimages/js/script.js"></script>
	<link type="text/css" rel="stylesheet" href="qtimages/css/jquery.mmenu.all.css" />
	<script type="text/javascript" src="qtimages/js/jquery.mmenu.all.min.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			var mmenu = $('nav#mmenu').mmenu({
				slidingSubmenus: true,
				classes: 'mm-white',
				//mm-fullscreen mm-light
				extensions: ["theme-white"],
				offCanvas: {
					position: "right",
					//left, top, right, bottom
					zposition: "front" //back, front,next
					//modal		: true
				},
				searchfield: false,
				counters: false,
				//navbars		: {
				//content : [ "prev", "title", "next" ]
				//},
				navbar: {
					title: "网站导航"
				},
				header: {
					add: true,
					update: true,
					title: "网站导航"
				}
			});
			$(".closemenu").click(function() {
				var mmenuAPI = $("#mmenu").data("mmenu");
				mmenuAPI.close();
			});
		});
	</script>

</div>


<script src="js/my.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/element/index.js"></script>
<script>
	function checkValid(entity) {
		if (!entity.yonghuming || entity.yonghuming === "") {alert("用户名不能为空"); return false;}
		if (!entity.xingming || entity.xingming === "") {alert("姓名不能为空"); return false;}
		if (!entity.shenfenzheng || entity.shenfenzheng === "") {alert("身份证不能为空"); return false;}
		if (entity.shenfenzheng && entity.shenfenzheng !== ""){let reg = /^\d{15}$|^\d{18}$|^\d{17}[xX]$/; if (!reg.test(entity.shenfenzheng)) {alert("请输入正确的身份证");return false;}}
		if (!entity.shouji || entity.shouji === "") {alert("手机不能为空"); return false;}
		if (entity.shouji && entity.shouji !== ""){let reg = /^[1][3,4,5,7,8][0-9]{9}$/; if (!reg.test(entity.shouji)) {alert("请输入正确的手机");return false;}}

		return true;
	}

	new Vue({
		el: '#wrapper',
		data: {
			authority: [],
			permission: [],
			storeUser: JSON.parse(localStorage.getItem("user")),
			// yonghuming: '',
			//xingming:'',
			user: {},
			searchText: null,
			zhaopianimrl: '',
//youtupianimrl
			objs: [],
			pageInfo: {},
			preActive: true,
			nextActive: true,
			zhaopianavt:null,
//youtupianavt
			entity: {

			}
		},
		created: function () {
			//this.loadData();

			axios.get('/auth').then(res => {
				if (res.data.code === '0') {
					this.user = res.data.data;
				}
			});




			//this.user = JSON.parse(localStorage.getItem('user'));


		},

		methods: {
			// loadData() {
			//
			// 	axios.get("/getAccountInfo").then(res => {
			// 		if (res.data.code === '0') {
			// 			this.entity = res.data.data;
			// 			if(this.entity.zhaopian) {this.zhaopianavt = JSON.parse(this.entity.zhaopian)[0];}
			// 			//tupianloadtb
			// 		} else {
			// 			msg('error', res.data.msg);
			// 		}
			// 	});
			//
			// },
			searchShangpinxinxi(text) {   // 根据关键字查询商品
				if(text) {
					location.href = '/front/shangpinxinxilisttp.html?text=' + text;
				}else {
					location.href = '/front/shangpinxinxilisttp.html';
				}
			},

			update() {
				if (checkValid(this.entity)) {
					if (!this.entity.id) {
						axios.post(
								"/yonghuxinxiInfo", this.entity
						).then(res => {
							if (res.data.code === '0') {
								msg('success', '添加成功');
								$('#mod').modal('hide');
								this.loadTable(1);
							} else {
								msg('error', res.data.msg);
							}
						})
					}
				}
			},
			zhaopiansccs(res, file) {
				this.zhaopianimrl = URL.createObjectURL(file.raw);
				this.entity.zhaopianflst.push(res.data.id);
				this.zhaopianavt = res.data.id
			},
			zhaopianbaul(file) {
				this.entity.zhaopianflst = [];
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2000MB!');
				}
				return isJPG && isLt2M;
			},
			//m_tupiansccsbaul
			//logout() {
			//    logout();
			//}
		}
	})
</script>
</body>
</html>
